<!--
 * @Descripttion: vue and node-bs
 * @Author: weijunliang-jul
 * @Date: 2021-02-25 18:28:44
 * @LastEditors: weijunliang-jul
 * @LastEditTime: 2021-03-02 16:45:26
-->
<template>
  <div
    class="tab-container"
  >
    <el-button
      type='primary'
      icon='el-icon-refresh'
      @click="reload"
    >刷新</el-button>
    <el-tabs
      v-model="activeName"
      style="margin-top:15px;"
      type="border-card"
      v-if="isRouterAlive"
    >
      <el-tab-pane
        v-for="item in tabMapOptions"
        :key="item.key"
        :label="item.label"
        :name="item.key"
      >
        <keep-alive>
          <tab-pane
            v-if="activeName==item.key"
            :type="item.key"
          />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TabPane from "./components/TabPane";
export default {
  // name: 'log',
  components: { TabPane },
  data() {
    return {
      tabMapOptions: [
        { label: "登录日志", key: "LoginLog" },
        { label: "操作日志", key: "ActionLog" },
      ],
      activeName: "LoginLog",
      isRouterAlive: true,
    };
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`);
    },
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false; //先关闭，
      this.$nextTick(function () {
        this.isRouterAlive = true; //再打开
      });
    },
  },
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
</style>